.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

// 可继承
li-style {
    position: relative;
    font-size: 12px;
    color: #7d7d7d;
    margin-right: 15px;

    a {
        line-height: 40px;

    }
}

ol-style {
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 40px;

    transform: scaleY(0);
    // 让盒子沿着y轴缩放到0,隐藏
    transform-origin: 50% 0;
    //我们需要将盒子从上面滑动下来,设置一下中心的缩放点,设置到最上面的中间位置
    transition: all 0.3s;
    //设置过渡

    li {
        float: none;
        height: 30px;

        &:hover {
            background-color: rgba($color: #F4F4F4, $alpha: 0.3);
            cursor: pointer;
            z-index: 2;
        }
    }
}



// 以下为正式样式
#head {
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    // // 吸顶效果
    // position: fixed;
    // top: 0;
    // width: 100%;
    // z-index: 3;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    
    
    .container {
        width: 1200px;
        margin: 0 auto;
        background-color: #f5f5f5;

        #nav {
            box-shadow: 0 0 5px rgba($color:#f5f5f5, $alpha: 0.3);
            



            .left-list {
                float: left;

                li:nth-child(1) {
                    line-height: 40px;

                    &:hover {
                        background-color: #fff;
                    }
                }


                li:nth-child(1):hover ol {
                    transform: scaleY(1);
                }

                li:nth-child(2) a {
                    color: #F23A0F;
                }


                li {
                    @extend li-style;
                    float: left;

                    a {
                        &:hover {
                            color: #F23A0F;
                        }
                    }


                    ol {
                        width: 390px;
                        height: 300px;
                        overflow: auto;
                        @extend ol-style;

                    }
                }

            }

            .right-list {
                float: right;

                li:nth-child(6) {
                    line-height: 40px;
                }

                li {
                    @extend li-style;
                    float: left;



                    &:hover ol {
                        transform: scaleY(1);
                    }

                    a {
                        &:hover {
                            color: #F23A0F;
                            cursor: pointer;
                        }
                    }


                    ol {
                        width: 100px;
                        height: 100px;
                        @extend ol-style;

                        li {
                            float: none;

                            &:hover {
                                color: #909090;
                            }
                        }

                    }
                }

            }
        }
    }
}